<template>
	<view class="login">
		<view class="bg_logo">
			<u-image width="280rpx" height="80rpx" :src="logoUrl" mode="widthFix"></u-image>
		</view>
		<view class="login_main">
			<u-field v-model="account"  maxlength="20"  placeholder="请输入您的账号" :clearable="false" >
				<u-icon slot="icon" name="account-fill" color="#2979ff" size="46"></u-icon>
			</u-field>
			<u-field
				v-model="password"
				label=" "
				:password="!isShowPassword"
				placeholder="请输入您的密码"
				:clearable="false"
				:right-icon="isShowPassword ? 'eye-fill' : 'eye-off'"
				@right-icon-click="showPassword"
				maxlength="15"
				class="uField"
			>
				<u-icon slot="icon" name="lock-fill" color="#2979ff" size="46"></u-icon>
			</u-field>
			<view class="submit">
				<u-button type="primary" shape="circle"  style="width: 600rpx;" open-type="getUserInfo" @getuserinfo="login">
					登录
				</u-button>
			</view>
		</view>
		<view class="positon_bottom"><text @click="toSecret">隐私政策</text></view>
	</view>
</template>
<script>
import { envConfig } from '@/common/dpapi/const/env';
import { login} from '@/common/apis/api/user';
export default {
	data() {
		return {
			isShowPassword: false,
			logoUrl: '/static/images/logo.png',
			account: '',
			password: ''
		};
	},
	mounted() {
	},
	methods: {
		// 是否显示密码
		showPassword() {
			this.isShowPassword = !this.isShowPassword;
		},
		// 隐私政策
		toSecret(){
			uni.navigateTo({
				url:'usrSecret'
			})
		},
		// 信息校验
		verification() {
			if(!this.account){
				console.log(this.account,'this.account............')
				uni.showToast({
					title:'请输入账号',
					icon:'none'
				})
				return
			}
			if(!this.password){
				uni.showToast({
					title:'请输入密码',
					icon:'none'
				})
				return
			}
			let reg=/^[\u4E00-\u9FA5A-Za-z0-9]+$/
			if(!reg.test(this.account)){
			    console.log('仅支持中英文数字')
					uni.showToast({
						title:'账号仅支持中英文数字',
						icon:'none'
					})
					return
			}
			uni.showLoading({
				mask: true,
				title: '登录中...'
			});
			return true
		},
		// 微信登录调用
		async login() {
			if (!this.verification()) return;
			uni.navigateBack()
			return
			uni.login({
				success: async (result) => {
					console.log(result, 'result');
					const { code } = result;
					console.log(code, 'code');
					const params = {
						appid: envConfig.wxAppId,
						code: code,
						appId: envConfig.appId,
						tenantId: envConfig.tenantId
					};
					console.log(params, 'params');
					const weappRes = await this.$store.dispatch("user/loginByWeapp", params).catch((err) => {
						setTimeout(() => {
							uni.hideLoading();
						}, 3000);
					});
					console.log('openid:', weappRes);
					if (weappRes) {
						uni.setStorageSync("openid", weappRes.openid);
					}
					// this.loginAction();
				}
				// fail: (error) => {
				//   uni.hideLoading();
				// },
			});
		},
		// 登录
		async loginAction() {
			// #ifdef H5
			if (!this.verification()) return
			// #endif
			let res = await login({
				appId: envConfig.appId,
				tenantId: envConfig.tenantId,
				code: this.checkCode,
				phone: this.phone,
			}).catch((err) => {
				setTimeout(() => {
					uni.hideLoading();
				}, 3000);
			});
			if (!res) return;
			uni.hideLoading();
			await this.$store.dispatch("user/userDetail");
			uni.navigateBack();
			await this.$store.dispatch("point/getCommonLog", {
				type: "login"
			})
			await this.$store.dispatch("order/fetchDefaultShop");
			await this.$store.dispatch("user/myUserDetail");
		},
	}
};
</script>

<style lang="scss" scoped>
.login {
	width: 100vw;
	height: 100vh;
	position: relative;
	.bg_logo {
		height: 500rpx;
		width: 750rpx;
		@include flex(row,center,center);
	}
	.login_main {
		width: 600rpx;
		margin: 0 auto;
		.submit {
			margin-top: 160rpx;
		}
	}
	.positon_bottom {
		position: absolute;
		bottom: 100rpx;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text {
			line-height: 100rpx;
			font-size: 28rpx;
			color: #409eff;
			padding: 0 20rpx;
		}
	}
}
::v-deep .login_main .u-label {
	flex: 0 0 35px !important;
}
::v-deep .login_main .submit button {
	width: 600rpx !important;
	font-size: 32rpx;
	letter-spacing: 2rpx;
}
::v-deep .login_main .uicon-eye-off{
	font-size: 42rpx!important;
}

// 密码input右侧图标眼睛一大一小的问题
::v-deep .uField .u-icon__icon{
	font-size: 42rpx!important;
}
</style>
